<template>
<div>
<!--  面包屑-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
  </el-breadcrumb>
<!--  卡片-->
  <el-card>
<!--    添加分类-->
    <el-row>
      <el-col>
        <el-button type="primary" @click="addCateFormbtn">添加分类</el-button>
      </el-col>
    </el-row>

<!--    表格-->
<!--    data表格的数据源 columns各列各行的配置
https://blog.csdn.net/sky_fy_1314/article/details/107383695
-->
    <tree-table class="treeTable" :data="getCateList" :columns="columns" show-index index-text="#" border :selection-type="false" :expand-type="false">
<!--是否有效-->
      <template slot="isok" slot-scope="scope">
        <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: #1e8658"></i>
        <i class="el-icon-error" v-else style="color: red"></i>
      </template>
<!--      层级-->
      <template slot="order" slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
        <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
        <el-tag size="mini" type="warning" v-else>三级</el-tag>
      </template>
<!--      操作-->
      <template slot="opt" slot-scope="scope">
        <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
      </template>
    </tree-table>

<!--    分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="querIfo.pagenum"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="querIfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </el-card>

<!--  添加分类对话框-->
  <el-dialog title="添加分类" :visible.sync="cateDialogVisible" @close="addDioalogColose" width="50%">
    <el-form ref="addCateFormRef" :model="addCateForm" label-width="100px" :rules="addCateFormRules">
      <el-form-item label="分类名称:" prop="cat_name" >
        <el-input v-model="addCateForm.cat_name"></el-input>
      </el-form-item>
      <el-form-item label="父级分类:">
        <!--        options用来指定数据源  props用来指定配置对象 -->
        <el-cascader v-model="selectKeys" :options="parentCateList" :props="parentConfiguration" @change="parentHandleChange" clearable change-on-select ></el-cascader>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="cateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
export default {
name: "Cate",
  data() {
    return {
      //请求商品列表参数对象
      querIfo: {
        //值：1，2，3 分别表示显示一层二层三层分类列表
        type:3,
        //当前页码值
        pagenum:1,
      //  每页显示多少条数
        pagesize:5
      },
    //  存储商品列表参数数组
      getCateList:[],
      //商品列表总条数
      total:0,
    //  为table指定列的定义
      columns:[
        {
          label:"分类名称",
          prop:"cat_name"
        },
        {
          label: "是否有效",
          type:'template',
          template:'isok'
        },
        {
          label: "排序",
          type:'template',
          template:'order'
        },
        {
          label: "操作",
          type:'template',
          template:'opt'
        }

      ],
    //  控制分类对话框的显示和隐藏
      cateDialogVisible:false,
    //添加分类数据
      addCateForm:{
      //父级id
        cat_pid:0,
      //  添加分类名称
        cat_name:'',
      //  层级
        cat_level:0,
      },
    //  验证表单规则
      addCateFormRules:{
        cat_name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
        ]
      },
    //  父级分类数据
      parentCateList:[],
    //  父级分类配置对象
      parentConfiguration:{
        value:'cat_id',
        label:'cat_name',
        children:'children'
      },
      //存储下拉框变化后的id
      selectKeys:[]
    }
  },
  created() {
  this.getCate();
  },
  methods: {
    //获取数据
    async getCate() {
      //get请求需要通过 params来指定请求参数对象
      const {data:res}=await this.$http.get("categories",{params:this.querIfo});
      if (res.meta.status!==200) return this.$message.error("获取商品列表数据错误");
      this.getCateList = res.data.result;
      this.total = res.data.total;
    },
    //监听pagesize的改变 会接收一个pagesize的值
    handleSizeChange(newPage){
      this.querIfo.pagesize = newPage;
      this.getCate();
    },
  //  监听pagenum的改变 会接收一个pagenum的对象
    handleCurrentChange(newNum){
      this.querIfo.pagenum = newNum;
      this.getCate();
    },
  //  添加分类按钮
    addCateFormbtn(){
      this.getParentCateList();
      this.cateDialogVisible=true;
    },
  //  获取父级分类
    async getParentCateList(){
      const {data:res} = await this.$http.get('categories',{params:{type:2}})
      this.parentCateList = res.data;
    },
  //  选择项发生变化触发这个函数
    parentHandleChange(){
      console.log(this.selectKeys);
    //  如果selectKeys数组的length大于0 证明选中父级分类
    //  反之，则没有选中任何父级分类
      if(this.selectKeys.length>0){
      //获取父级分类的id 之后赋值给添加分类数据的id
        this.addCateForm.cat_pid = this.selectKeys[this.selectKeys.length-1];
      //  为当前等级赋值  当前等级的值与数组的长度一样
        this.addCateForm.cat_level= this.selectKeys.length;
        return
      }else{
      //  如果数组的长度小于0 则表示添加等级为0级的
        this.addCateForm.cat_pid = 0;
        this.addCateForm.cat_level = 0;
      }
    },
    //点击按钮 添加新的分类
    addCate(){
      //判断表单验证是否通过
      this.$refs.addCateFormRef.validate(async vali=>{
        if (!vali) return ;
        const  {data:res}= await this.$http.post('categories',this.addCateForm);
        if (res.meta.status!==201) return this.$message.error("添加失败");
        this.$message.success("添加分类成功");
        this.getCate();
        this.cateDialogVisible = false
      })
    },
  //  监听关闭事件 清空表单数据
    addDioalogColose(){
      this.$refs.addCateFormRef.resetFields();
      this.selectKeys = [];
      this.addCateForm.cat_level = 0;
      this.addCateForm.cat_pid = 0;
      console.log(this.$refs.addCateFormRef);
    }
  },
}
</script>

<style scoped>
.treeTable{
  margin-top: 15px;
}
.el-cascader{
  width: 100%;
}
</style>